$color-red:#ff0000;
$large-size:40px;

// 先声明基础颜色
$primary:#409eff;
$success:#67C23A;
$warning:#E6A23C;
$danger:#F56C6C;
$info:#909399;

$hun:100%;

$colors : (
    primary:$primary,
    success:$success,
    warning:$warning,
    danger:$danger,
    info:$info
); 
// --primary:#{$var}
// --#{$var}:#{$co};

// $i=1
:root {

    @each $var,
    $co in $colors {
        --#{$var}:#{$co};
        @for $i from 1 through 5{
            --#{$var}-light-#{$i*2-1}: #{mix($co,#fff,calc($hun - $hun * ($i * 2 - 1)/ 10))}
        }
        --#{$var}-light-8:#{mix($co,#fff,20%)};
        --#{$var}-dark-2: #{mix($co,#000,80%)};
    }



  --elg-color-white: #fff;
  --elg-color-black: #000;
  --elg-bg-color: #ffffff;
  --elg-bg-color-page: #f2f3f5;
  --elg-bg-color-overlay: #ffffff;
  --elg-text-color-primary: #303133; //
  --elg-text-color-regular: #606266;//
  --elg-text-color-secondary: #909399;//
  --elg-text-color-placeholder: #a8abb2;
  --elg-text-color-disabled: #c0c4cc;//
  --elg-border-color: #dcdfe6; //
  --elg-border-color-light: #e4e7ed;//
  --elg-border-color-lighter: #ebeef5;//
  --elg-border-color-extra-light: #f2f6fc;//
  --elg-border-color-dark: #d4d7de;
  --elg-border-color-darker: #cdd0d6;
  --elg-fill-color: #f0f2f5;
  --elg-fill-color-light: #f5f7fa;
  --elg-fill-color-lighter: #fafafa;
  --elg-fill-color-extra-light: #fafcff;
  --elg-fill-color-dark: #ebedf0;
  --elg-fill-color-darker: #e6e8eb;
  --elg-fill-color-blank: #ffffff;
  // --elg-bg-color
  // 和 border 相关的变量
  --elg-border-width: 1px;
  --elg-border-style: solid;
  --elg-border-color-hover: var(--elg-text-color-disabled);
  --elg-border: var(--elg-border-width) var(--elg-border-style) var(--elg-border-color);
  --elg-border-radius-base: 4px;
  --elg-border-radius-small: 2px;
  --elg-border-radius-round: 20px;
  --elg-border-radius-circle: 100%;

  // 和 font 相关的变量
  --elg-font-size-extra-large: 20px;
  --elg-font-size-large: 18px;
  --elg-font-size-medium: 16px;
  --elg-font-size-base: 14px;
  --elg-font-size-small: 13px;
  --elg-font-size-extra-small: 12px;
  --elg-font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', '\5fae\8f6f\96c5\9ed1', Arial, sans-serif;
  --elg-font-weight-primary: 500;

  // 和 disabled 相关的变量
  --elg-disabled-bg-color: var(--elg-fill-color-light);
  --elg-disabled-text-color: var(--elg-text-color-placeholder);
  --elg-disabled-border-color: var(--elg-border-color-light);

  // 和 transition 过渡相关的变量
  --elg-transition-duration: 0.3s;
  --elg-transition-duration-fast: 0.2s;
}